<template>
    <div>
      <!-- 指标管理模块 -->
      <div id="headA">
        <div id="head">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: 'welcome' }">养老服务管理系统</el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #666666;">配置管理</span></el-breadcrumb-item>
            <el-breadcrumb-item><span style="color: #3C763D;">指标管理</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div id="ZBGLshang">
        <span style="display: block; font-size: 20px; font-weight: 700; padding-top: 10px; margin-left: 10px;">搜索条件</span>
        <div style="width: 100%; height: 4px; background-color: #E7EAEC; margin-top: 10px;"></div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: -10px;">
          <el-form-item label="指标项名称：" id="ZBGLshangc">
            <el-input v-model="formInline.zbxname" placeholder="" id="ZBGLshanga"></el-input>
          </el-form-item>
          <el-form-item label="状态：" id="ZBGLshangc">
            <el-select v-model="formInline.status"  clearable size="small" placeholder="请选择" style="width: 100px;">
              <el-option label="启用" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="onSubmit" id="ZBGLshangb">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="XZGLxia">
        <div style="margin-left: 28px; padding-top: 20px; padding-bottom: 15px;">
          <el-row>
            <el-button size="small" type="success" @click.native="onAdd" plain>新建</el-button>
            <el-button size="small" type="primary" @click.native="onCha()" plain>查看</el-button>
            <el-button size="small" type="warning" @click.native="onXiu()" plain>修改</el-button>
            <el-popconfirm icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="dels">
              <el-button type="danger" slot="reference" size="small" style="margin: 10px;" plain>删除</el-button>
            </el-popconfirm>
          </el-row>
        </div>
        <div>
          <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" height="240" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" width="90" label="序号" :index="indexAdd"></el-table-column>
            <el-table-column prop="zbxname" label="指标项名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="leibie" label="类别" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="kjleixing" label="控件类型" width="100" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column label="控件类型" prop="kjleixing" width="100">
              <template slot-scope="scope">{{ scope.row.kjleixing == 1 ? '单选' : '多选' }}</template>
            </el-table-column> -->
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">{{ scope.row.status == 0 ? '启用' : '禁用' }}</template>
            </el-table-column>
            <el-table-column prop="cjname" label="创建人" width="260" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createdate" label="创建时间" width="150" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="block" style="margin-top: 20px; margin-left: 30px;">
        <el-pagination
          @size-change="xianshi"
          @current-change="yema"
          :current-page="formInline.dqNum"
          :page-sizes="[10, 20, 50]"
          :page-size="formInline.xsNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div>
        <!-- 新增修改信息模块 ------------------------------------------------------------>
        <el-dialog :title="isAdd?'新建':'修改'" :visible.sync="dialogFormVisible" :append-to-body="true" style="margin-top: -80px;">
          <el-form :model="form1" ref="form1" :rules="rules">
            <div id="ZBGLshangd">
              <el-form-item id="ZBGLshange" label="指标项名称：" prop="zbxname" :label-width="formLabelWidth">
                <el-input size="mini" v-model="form1.zbxname" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <el-form-item label="类别:" id="ZBGLshangf" prop="leibie">
              <el-select v-model="form1.leibie" size="small" placeholder="请选择" id="ZBGLshangi">
                <el-option label="设备信息" value="设备信息"></el-option>
                <el-option label="房屋信息管理" value="房屋信息管理"></el-option>
                <el-option label="内部管理信息" value="内部管理信息"></el-option>
                <el-option label="服务质量信息" value="服务质量信息"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态:" id="ZBGLshanghj" prop="status">
              <el-select v-model="form1.status" size="small" placeholder="请选择" id="ZBGLshanghk">
                <el-option label="启用" :value="0"></el-option>
                <el-option label="禁用" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <div style=" width: 280px; height: 40px; margin-top: -62px; margin-left: 295px;">
              <el-form-item label="控件类型：" id="ZBGLshangg" prop="kjleixing">
                <el-select v-model="form1.kjleixing" size="small" placeholder="请选择" id="ZBGLshangh">
                  <el-option label="单选" value="单选"></el-option>
                  <el-option label="多选" value="多选"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 98%; height: 3px; margin-top: 15px; background: #E7EAEC;"></div>
            <div style="margin-top: 15px;"><span>项值列表</span></div>
            <div style="width: 98%; height: 1px; margin-top: 15px; background: #E7EAEC;"></div>
            <el-row>
              <el-button size="mini" type="success" @click="addnapes()" style="margin: 10px;" plain>新建</el-button>
              <!-- <el-button type="danger" @confirm="deladd" size="mini" style="margin: 10px;" plain>删除</el-button> -->
            </el-row>
            <el-table :data="form1.formarr" height="220" row-class-name="multipleTable" border="" @selection-change="handleSelectionadd">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="zhibiao" label="指标值" width="150">
                  <template slot-scope="scope"><el-input v-model="scope.row.zhibiao" size="small"></el-input> </template>
                </el-table-column>
                <el-table-column label="状态" width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.status" size="small" placeholder="请选择">
                      <el-option label="启用" :value="0"></el-option>
                      <el-option label="禁用" :value="1"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
            </el-table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addZhiBiaoGuanLi('form1')" v-show="isAdd">确 定</el-button>
            <el-button type="primary" @click="editZhiBiaoGuanLi('form1')" v-show="!isAdd">保 存</el-button>
            <el-button @click="dialogFormVisible=false">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 查看信息模块 ------------------------------------------------------------>
        <el-dialog :title="'查看'" :visible.sync="dialogFormVisiblec" :append-to-body="true" style="margin-top: -80px;">
          <el-form :model="formcha" ref="formcha">
            <div id="ZBGLshangd">
              <el-form-item id="ZBGLshange" label="指标项名称：" prop="zbxname" :label-width="formLabelWidth">
                <el-input disabled size="mini" v-model="formcha.zbxname" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <el-form-item label="类别:" id="ZBGLshangf">
              <el-input disabled size="mini" v-model="formcha.leibie" style="width: 150px;" autocomplete="off" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="状态:" style="width: 220px; margin-top: -15px; margin-left: 60px;">
              <el-input disabled size="mini" v-model="formcha.status" style="width: 150px; margin-left: 8px;" autocomplete="off" placeholder=""></el-input>
            </el-form-item>
            <div style=" width: 280px; height: 40px; margin-top: -62px; margin-left: 295px;">
              <el-form-item label="控件类型：" style="width: 270px;">
                <el-input disabled size="mini" v-model="formcha.kjleixing" style="width: 150px; margin-left: -6px;" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div style=" width: 280px; height: 40px; margin-top: 6px; margin-left: 46px;">
              <el-form-item label="添加人：" style="width: 270px;">
                <el-input disabled size="mini" v-model="formcha.cjname" style="width: 150px; margin-left: 0px;" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div style=" width: 280px; height: 40px; margin-top: -62px; margin-left: 295px;">
              <el-form-item label="添加时间：" style="width: 270px;">
                <el-input disabled size="mini" v-model="formcha.createdate" style="width: 150px; margin-left: -7px; margin-top: 24px;" autocomplete="off" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div style="width: 98%; height: 3px; margin-top: 30px; background: #E7EAEC;"></div>
            <div style="margin-top: 15px;"><span>项值列表</span></div>
            <div style="width: 98%; height: 1px; margin-top: 15px; margin-bottom: 20px; background: #E7EAEC;"></div>
            <el-row>
            </el-row>
            <el-table :data="formcha.formarr" height="220" row-class-name="multipleTable">
                <el-table-column prop="zhibiao" label="指标值" width="150">
                  <template slot-scope="scope"><el-input disabled v-model="scope.row.zhibiao" size="small"></el-input> </template>
                </el-table-column>
                <el-table-column label="状态" width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.status" disabled size="small" placeholder="请选择">
                      <el-option label="启用" :value="0"></el-option>
                      <el-option label="禁用" :value="1"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
            </el-table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisiblec = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formInline: {
          zbxname: '',
          status: '',
          dqNum: 1,
          xsNum: 10,
        },
        tableData: [{
          noid: '',
          zbxname: '',
          leibie: '',
          kjleixing: '',
          status: '',
        }],
        form1: {
          zbxname: '',
          leibie: '',
          status: '',
          kjleixing: '',
          createdate: '',
          cjname: '',
          zbid: '',
          formarr:[{ zhibiao:'', status:''}],
        },
        formcha: {
          zbxname: '',
          leibie: '',
          status: '',
          kjleixing: '',
          createdate: '',
          cjname: '',
          formarr:[{ zhibiao:'', status:''}],
        },
        formc: {
          pgzname: '',
          kjtype: '',
          fenzhi: '',
          status: '',
          founder: '',
          createdate: '',
          miaoshu: '',
        },
        rules: {
          zbxname: [
            { required: true, message: '请输入模板名称', trigger: 'blur' }
          ],
          leibie: [
            { required: true, message: '请选择控件类别', trigger: 'change' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
          kjleixing: [
            { required: true, message: '请选择控件类型', trigger: 'change' }
          ],
        },
        total: 0,
        isAdd: true,
        dialogFormVisible: false,
        formLabelWidth:'200px',
        formcLabelWidth: '100px',
        multipleSelection: [],
        multipleSelectionadd: [],
        dialogFormVisiblec: false,
      }
    },
    methods: {
      chaxun(){
        axios.post("/chain-api/zhibiaoguanli/page", this.formInline).then(res=>{
          this.tableData = res.data.list;
          this.total = res.data.total;
        })
      },
      onSubmit(){
        this.formInline.dqNum = 1;
        this.chaxun();
      },
      onAdd(){
        this.isAdd = true;
        this.dialogFormVisible = true;
        this.form1.zbxname = '';
        this.form1.leibie = '';
        this.form1.status = '';
        this.form1.kjleixing = '';
        this.form1.createdate = '';
        this.form1.cjname = '';
        this.form1.zbid = '';
        this.form1.formarr = [];
      },
      addnapes(){
        this.form1.formarr.push({ zhibiao:'', status:''});
      },
      addZhiBiaoGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.isAdd = false;
            this.dialogFormVisible = false;
            this.form1.cjname = this.$store.state.loginuserinfo.userName;
            this.form1.createdate = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
            axios.post("/chain-api/zhibiaoguanli/addzbgl", this.form1).then(res=>{
              if (res.data.code) {
                this.$message('增加成功');
              } else {
                this.$message('增加失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleSelectionadd(val) {
        this.multipleSelectionadd = val;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      onCha(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.dialogFormVisiblec = true;
          axios.get("/chain-api/zhibiaoguanli/" + aid).then(res=>{
            this.formcha = res.data.data;
            if (this.formcha.status == 0) {
              this.formcha.status = '启用';
            } else {
              this.formcha.status = '禁用';
            }
          });
        }
      },
      onXiu(){
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length != 1) {
          this.$message.error("请选择一条数据！")
          this.onSubmit();
        } else {
          var aid = ids[0];
          this.isAdd = false;
          this.dialogFormVisible = true;
          axios.get("/chain-api/zhibiaoguanli/" + aid).then(res=>{
            this.form1 = res.data.data;
          });
        }
      },
      editZhiBiaoGuanLi(form1){
        this.$refs[form1].validate((valid) => {
          if (valid) {
            this.dialogFormVisible=false;
            axios.post("/chain-api/zhibiaoguanli/updatezbgl",this.form1).then(res=>{
              if(res.data.code){
                this.$message('修改成功');
              }else{
                this.$message('修改失败');
              }
              this.onSubmit();
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //删除12
      dels() {
        let ids = this.multipleSelection.map(value => value.noid)
        if (ids.length == "") {
          this.$message.error("请选择！")
          this.onSubmit();
        } else {
          axios.post("/chain-api/zhibiaoguanli/dels", ids).then(res => {
            if (res.data.code) {
              this.$message.success("批量删除成功！")
              this.onSubmit()
            } else {
              this.$message.error("批量删除失败！")
              this.onSubmit()
            }
          })
        } 
      },
      deladd(){

      },
      xianshi(a){
        this.formInline.xsNum = a;
        this.chaxun();
      },  
      yema(a){
        this.formInline.dqNum = a;
        this.chaxun();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // type序号 - 页面切换递增
      indexAdd(index) {
        const dq = this.formInline.dqNum; // 当前页码
        const xs = this.formInline.xsNum; // 每页条数
        return index + 1 + (dq - 1) * xs;  // 下标 + 1 + (当前页码 - 1) * 当前页显示的条数
      },
    },
    mounted(){
      this.chaxun()
    }
  }
  </script>
  
  <style scope>
  #head{
    width: 1050px;
    height: 25px;
    padding-left: 20px;
    padding-top: 10px;
    margin-left: 20px;
    border: 8px groove skyblue;
    background-color: #DFF0D8;
  }
  #headA{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #ZBGLshang{
    width: 1090px;
    height: 110px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #XZGLxia{
    width: 1090px;
    height: 350px;
    margin-top: 25px;
    margin-left: 20px;
    background-color: #FFFFFF;
  }
  #ZBGLshanga{
    width: 150px;
    height: 30px;
  }
  #ZBGLshangb{
    /* width: 75px;
    height: 38px; */
    font-size: 14px;
    background-color: #18A689;
    margin-top: 27px;
    margin-left: 18px;
  }
  #ZBGLshangc{
    margin-top: 25px;
    margin-left: 25px;
  }
  #ZBGLshangd{
    width: 350px;
    height: 40px;
    /* float: left; */
    /* display: inline-block; */
    margin-top: -25px;
    margin-left: -84px;
  }
  #ZBGLshange{
    display: inline;
    width: 400px;
    height: 40px;
  }
  #ZBGLshangf{
    width: 270px;
    height: 40px;
    margin-top: -40px;
    margin-left: 325px;
    /* background-color: aqua; */
  }
  #ZBGLshangi{
    width: 200px;
    height: 32px;
    margin-top: 0px;
    margin-left: 0px;
    /* background-color: red; */
  }
  #ZBGLshangg{
    width: 300px;
    height: 40px;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #ZBGLshangh{
    /* float: left; */
    width: 200px;
    height: 30px;
    margin-top: 0px;
    margin-left: -5px;
    padding-left: 10px;
    padding-right: 0px;
  }
  #ZBGLshanghi{
    width: 300px;
    height: 90px;
    margin-top: -50px;
    margin-left: -85px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #ZBGLshanghj{
    width: 225px;
    height: 40px;
    margin-top: -15px;
    margin-left: 49px;
    padding-left: 0px;
    padding-right: 0px;
    /* background-color: #18A689; */
  }
  #ZBGLshanghk{
    width: 150px;
    height: 30px;
    margin-left: 9px;
    padding-left: 10px;
  }
</style>